<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>home</title>
	<script type="text/javascript" src="../js/lay-module/common/jquery.min.js"></script>
	<script type="text/javascript" src="../js/lay-module/common/echarts.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/lay-module/pages/home.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
    <script type="text/javascript" src="../js/lay-module/pages/echarts.min.js"></script>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
          media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md6">
                <!--商品销量柱状图-->
                <div id="zhu"  style="width: 738px;height:400px;"></div>
            </div>
            <div class="layui-col-md6">
                <!--商品分类销量饼状图-->
                <div id="bing" style="width: 650px;height:250px;"></div>
                <div id="task-link">
                    <ul>
                        <li><a id="waitDo">
                                <img src="../images/待处理订单.png">
                                <span >待处理订单</span>
                            </a></li>
                        <li><a id="waitGo">
                                <img src="../images/货车.png">
                                <span>代发货订单</span>
                            </a></li>
                        <li><a  id="waitLook">
                                <img src="../images/退.png">
                                <span>待退货审核</span>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header"><img src="../images/product_top.png"><span>产品销售排行TOP10</span></div>
                    <div class="layui-card-body">
                        <div class="layui-container">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <ul class="range-left">
                                        <li th:each="Top5WaresInfo:${Top5WaresInfo}">
                                            <span class="layui-badge" th:text="${Top5WaresInfo.topWaresNum}"></span>
                                            <a href="javascript:;" th:text="${Top5WaresInfo.waresName}"></a>
                                            <span class="con" th:text="${Top5WaresInfo.price}"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="layui-col-md6">
                                    <ul class="range-right" th:each="Top6to10WaresInfo:${Top6to10WaresInfo}">
                                        <li>
                                            <span class="layui-badge" th:text="${Top6to10WaresInfo.topWaresNum}"></span>
                                            <a href="javascript:;" th:text="${Top6to10WaresInfo.waresName}"></a>
                                            <span class="con" th:text="${Top6to10WaresInfo.price}"></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zhu'));

        $.post("/wares/dateZhu").done(function (data) {
            myChart.setOption({
                title: {
                    text: '商品销量Top5库存数量统计'
                },
                tooltip: {},
                xAxis: {
                    data: data.x,
                    axisLabel: {
                        interval: 0, //强制所有标签显示
                    },
                },
                yAxis: {},
                series: [{
                    name: '库存',
                    type: 'bar',
                    data: data.store,
                    itemStyle: {
                        color: '#63869e',
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        borderColor: '#73c0de',
                        shadowColor: '#5470c6',
                        shadowBlur: 3
                    }
                }]
            });
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('bing'));
        $.post("/wares/dateBing").done(function (data) {
            // 指定图表的配置项和数据
            myChart1.setOption({
                title: {
                    text: '商品销量Top5统计'
                },
                tooltip: {},
                series: [{
                    name: '销量',
                    type: 'pie',
                    radius: '55%', // 饼状图半径
                    center: ['50%', '50%'], // 饼状图位置
                    data: data
                }]
            });
        });
    </script>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form','jquery','form','layer'], function () {
            var form = layui.form, layer = layui.layer;
            var $ = layui.jquery;

            $("#waitDo").on("click",function (){
                layer.msg("待处理订单数:2")
            });
            $("#waitGo").on("click",function (){
                layer.msg("待发货订单数:0")
            });
            $("#waitLook").on("click",function (){
                layer.msg("待退货审核数:0")
            });
        });
    </script>
</body>
</html>